<template>
  <div class="answer-list">
    <heads :title="$route.query.type == '2' ? '待完成' : $route.query.type == '3' ? '已完成' : '订单列表'"></heads>
    <div class="main-content">
      <van-pull-refresh v-model="isLoading" @refresh="getData">
        <template v-if="list && list.length>0">
          <div class="cell-box" v-for=" (item,index) in list" :key="index" @click="jump(item)">
            <div class="cell-top flex space-between">
              <div class="h1 flex flex-start">
                {{ getStatus(item.status) }}
                
              </div>
              <p class="time">{{ item.created_at }}</p>
            </div>
            <div class="cell-bottom flex space-between">
              <div class="cell-bottom-left">
                {{ item.name }} {{ item.time }}
              </div>
              <a :href="`tel:${ item.phone }`" class="btn-call" @click.stop="stopPop"><img src="@/assets/images/icon-phone.png" alt="">拨打电话</a>
              </div>
            <div class="cell-bottom"
            :style="{'padding-bottom':item.remark ? '0px' : '.3rem'}">{{ item.address }}</div>
            <van-cell class="cell-detail" :title="item.remark" v-if="item.remark" />
          </div>
        </template>
        <div v-else class="empty-box">没有更多数据了</div>
      </van-pull-refresh>
    </div>
        <foots :active="1"></foots>

  </div>
</template>

<script>
import Mock from "mockjs";
import { Toast } from "vant";

export default {
  components: {
    heads: resolve => require(["@/components/common/heads"], resolve),
    foots: resolve => require(["@/components/common/foots"], resolve),
    Cell: resolve => require(["@/components/common/cell-system"], resolve)
  },
  data() {
    return {
      isLoading: true,
      list: []
    };
  },
    watch: {
    '$route.query.type':{
      handler(newVal,oldVal){
         this.getData();
      },
      immediate:true

    }
  },
  methods: {
       getData() {
      let _this = this;
      this.isLoading = false;
      this.$ajax
        .post(`${this.$baseUrl}/sender/orderListBySender`, {type:this.$route.query.type})
        .then(function(res) {
          if (res.data.code == 200) {
            _this.list = res.data.data;
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },

    jump(data) {
      this.$router.push({ path: `/glabOrder/${data.id}` });
    },
    stopPop(){
      return false
    },
    getStatus(data) {
      switch (data) {
        case 1:
          return "已下单";
          break;
        case 2:
          return "已接单";
          break;
        case 3:
          return "已取消";
          break;
            case 4:
          return "已完成";
          break;
      }
    }
  },
  created() {
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.answer-list {
  .main-content {
    min-height: 92vh;
    margin-top: 0;
    padding: 0.3rem;
    box-sizing: border-box;
  }
  .cell-box {
    border-radius: 5px;
    padding: 0 0.3rem;
    box-sizing: border-box;
    background: #fff;
    margin-bottom: 0.3rem;
    font-size: 0.3rem;
    color: #999;

    .cell-top {
      padding-top: 0.3rem;
      .h1 {
        max-width: 80%;
        color: #1BA447;
        align-items: center;
        span {
          font-size: 0.24rem;
          color: #999;
          padding-left: 0.3rem;
        }
      }
      .time {
        min-width: 1.1rem;
        text-align: center;
      }
    }
    .cell-bottom {
      text-align: left;
      padding-top: 0.1rem;
      .cell-bottom-left{
        color: #1c1c1c;
      }
      .btn-call{
        background: #1BA447;
        min-width: 1.56rem;
        line-height: .6rem;
        text-align: center;
        border-radius: .3rem;
        color: #fff;
        font-size: .24rem;
        img{
          margin-right: 5px;
          width: .17rem;
          vertical-align: middle;
        }
      }
    }
    .cell-detail {
      padding-left: 0;
      padding-right: 0;
      margin-top: 0.3rem;
      border-top: 0.5px solid #d8d8d8;
    
      .van-cell__title {
        text-align: left;
        font-size: .28rem;
         color: #999;
      }
    }
  }
}
</style>
